<template>
    <div class="home-container">
        <div class="card-container">
            <el-card shadow="never">
                <div class="card-main">
                    <div class="icon">
                        <i class="iconfont icon-wenwuguanli"></i>
                    </div>
                    
                    <div class="card-data">
                        <div class="card-panel-text">文物总数</div>
                        <span class="card-num">{{artCount}}</span>
                    </div>
                </div>
            </el-card>

            <el-card shadow="never">
                <div class="card-main">
                    <div class="icon">
                        <i class="iconfont icon-xinwen"></i>
                    </div>
                    
                    <div class="card-data">
                        <div class="card-panel-text">新闻总数</div>
                        <span class="card-num">{{newCount}}</span>
                    </div>
                </div>
            </el-card>

            <el-card shadow="never">
                <div class="card-main">
                    <div class="icon">
                        <i class="iconfont icon-yonghuguanli_huaban"></i>
                    </div>
                    
                    <div class="card-data">
                        <div class="card-panel-text">用户总数</div>
                        <span class="card-num">{{userCount}}</span>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="ECharts-container">
            <el-card shadow="never">
                <div ref="chart" class="echart-main"></div>
            </el-card>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { getNewsCount } from '@/api/news'
import { getArtCount } from '@/api/artifact'
import { getUserCount } from '@/api/user'

export default {
    name: 'Home',

    components: {},

    directives: {},

    data() {
        return {
            artCount:null,
            newCount:null,
            userCount:null
        };
    },

    mounted() {
        this.initEChart()
        this.getInfo()
    },

    methods: {
        /**
         * 获取信息
         */
        getInfo(){ 
            let artParams = { 
                artId:'',
                artName:''
            }

            let newMap = { 
                title:null,
                ncid:null,
                author:null,
                time:null
            }
            getNewsCount(newMap).then(res => { 
                this.newCount = res.data
            })

            getArtCount(artParams).then(res => { 
                this.artCount = res.data
            })

            getUserCount().then(res => { 
                this.userCount = res.data
            })



            
        },

        /**
         * 初始化ECharts图表
         */
        initEChart(){ 
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(this.$refs.chart);




            // 绘制图表
            myChart.setOption({
                title: {
                    text: '用户流量折线图'
                },
                tooltip: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                legend:{
                    data:['流量']
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2021-10-18', '2021-10-17', '2021-10-16', '2021-10-15', '2021-10-14', '2021-10-13']
                },
                yAxis: {},
                series: [
                    {
                        name: '流量',
                        type: 'line',
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            })

        } 
    },
};
</script>

<style scoped>
.home-container{ 
    margin: 20px 50px;
    min-width: 1100px;
}

.card-container{ 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.card-main{ 
    width: 300px;
    height: 108px;
    display: flex;
    flex-direction: row;
}

.icon{ 
    width: 110px;
    margin: auto;
}

.card-data{ 
    margin: auto;
}

.iconfont{ 
    font-size: 76px !important;
}
.icon-wenwuguanli{ 
    color: #e4e43e;
}

.icon-xinwen{ 
    color:#36CFC9;
}

.icon-yonghuguanli_huaban{ 
    color: #17abe3;
}

.card-panel-text{ 
    line-height: 18px;
    color: rgba(0,0,0,.45);
    font-size: 23px;
    margin-bottom: 12px;
}

.card-num{ 
    font-weight: 700;
    color: #666;
    font-size: 20px;
}

.ECharts-container{ 
    margin: 30px auto;
    width: 100%;
}


.echart-main{ 
    width: 100%;
    height: 500px;
}

</style>